<template>
  <page-header-wrapper :title="false">
    <el-card class="box-card">
      <div slot="header" class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :span="8">
              <a-form-item label="问卷名称">
                <a-select v-model="queryParam.surveyId" @change="handleSurveyChangeSearch" placeholder="问卷名称">
                  <a-select-option v-for="item in surveyList" :value="item.id">{{ item.surveyName }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
<!--            <a-col :span="8">
              <a-form-item label="所属分类">
                <a-select v-model="queryParam.categoryId" placeholder="所属分类">
                  <a-select-option v-for="item in surveyCategoryList" :value="item.id">{{ item.categoryName }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->
            <a-col :span="8">
              <a-form-item label="所属题目">
                <a-select v-model="queryParam.topicId" placeholder="所属题目">
                  <a-select-option v-for="item in topicListSearch" :value="item.id">{{ item.topicName }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="8">
              <a-button style="margin-right: 8px" type="primary" @click="query">查询</a-button>
              <a-button style="margin-right: 8px" @click="reset">重置</a-button>
                <a-button icon="plus" style="margin-right: 8px" type="primary" @click="handleAdd">新建</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="问卷名称" prop="surveyName" align="center" />
        <!-- <el-table-column label="所属分类" prop="categoryName" align="center" /> -->
        <el-table-column label="所属题目" prop="topicName" align="center" />
        <el-table-column label="选项类型" align="center" >
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.optionsType) === 1">文本</el-tag>
            <el-tag v-if="parseInt(scope.row.optionsType) === 2">图片</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="选项内容" prop="optionsContent" align="center" />
        <el-table-column label="选项分值" prop="optionsScore" align="center" />
        <el-table-column label="选项标签" prop="categoryLabelName" align="center" />
        <!-- <el-table-column width="150" label="状态" align="center" >
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.state) === 1">激活</el-tag>
            <el-tag v-if="parseInt(scope.row.state) === 2" type="danger">冻结</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column label="排序号" prop="sortOrder" align="center"/>
        <el-table-column label="创建时间" prop="createTime" align="center" />
        <el-table-column label="更新时间" prop="updateTime" align="center" />
        <el-table-column width="150" fixed="right" align="center" label="操作" >
          <template slot-scope="scope">
            <el-link :underline="false" type="primary" @click="handleEdit(scope.row)">编辑</el-link>
            <!-- <el-link :underline="false" style="margin-left:10px;" type="primary" @click="handleLabel(scope.row)">标签</el-link> -->
          </template>
        </el-table-column>
      </el-table>
      
      <div style="display: flex;justify-content: flex-end;margin: 20px 0 0;">
        <el-pagination
          :current-page="queryParam.page"
          :page-size="queryParam.limit"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-card>

    <a-modal :title="modal.title" :visible="modal.visible"
      maskClosable width="600px" @cancel="modal.visible = false" @ok="handleOk">
      <a-form :form="form" :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }">

        <a-form-item label="id" style="display: none;">
          <a-input v-decorator="['id']" />
        </a-form-item>
                
        <a-form-item label="所属问卷">
          <a-select @change="handleSurveyChange"
            v-decorator="['surveyId', { rules: [{ required: true, message: '请选择【所属问卷】' }] }]">
            <a-select-option v-for="item in surveyList" :value="item.id">{{ item.surveyName }}</a-select-option>
          </a-select>
        </a-form-item>
                
        <a-form-item label="所属题目">
          <a-select @change="handleTopicChange"
            v-decorator="['topicId', { rules: [{ required: true, message: '请选择【所属题目】' }] }]">
            <a-select-option v-for="item in topicList" :value="item.id">{{ item.topicName }}</a-select-option>
          </a-select>
        </a-form-item>
                
        <a-form-item label="所属标签">
          <a-select
            v-decorator="['categoryLabelId', { rules: [{ required: true, message: '请选择【所属标签】' }] }]">
            <a-select-option v-for="item in surveyCategoryLabelList" :value="item.id">{{ item.labelName }}</a-select-option>
          </a-select>
        </a-form-item>
                
        <a-form-item label="选项类型">
          <a-select
            v-decorator="['optionsType', { rules: [{ required: true, message: '请选择【选项类型】' }] }]">
            <a-select-option v-for="item in optionsTypeList" :value="item.value">{{ item.label }}</a-select-option>
          </a-select>
        </a-form-item>
                
        <a-form-item label="选项内容">
          <a-input v-decorator="['optionsContent', { rules: [{ required: true, message: '请选择【选项内容】' }] }]" />
        </a-form-item>
                
        <a-form-item label="选项分值">
          <a-input-number :min="1" :precision="0" placeholder="选项分值" 
          v-decorator="['optionsScore', { rules: [{ required: true, message: '请选择【选项分值】' }] }]"
          :style="{ width: '100%', textAlign: 'center', display: 'inline-block' }" />
        </a-form-item>
        
        <a-form-item label="排序号">
          <a-input-number :min="1" :precision="0" placeholder="排序号" 
          v-decorator="['sortOrder', { rules: [{ required: true, message: '请选择【排序号】' }] }]"
          :style="{ width: '100%', textAlign: 'center', display: 'inline-block' }" />
        </a-form-item>
        
      </a-form>
    </a-modal>
       
  </page-header-wrapper>
</template>

<script>
import {
  addPaiSurveyTopicOptions, listByPagePaiSurveyTopicOptions, updatePaiSurveyTopicOptions, 
  listAllPaiSurvey, listAllPaiSurveyCategory, listAllPaiSurveyTopic, listAllPaiSurveyCategoryLabel
} from '@/api/survey'

import pick from 'lodash.pick'
const baseApi = process.env.VUE_APP_API_BASE_URL
  // 表单字段
const fields = ['id', 'surveyId', 'categoryId', 'topicId', 'categoryLabelId', 'optionsContent', 'optionsScore', 'optionsType', 'sortOrder']

export default {
  name: 'Index',
  data () {
    return {
      optionsTypeList: [
        {value: 1, label: '文本'}
      ],
      stateList: [
        {value: 1, label: '激活'}, 
        {value: 2, label: '冻结'}
      ],
      queryParam: {
        page: 1,
        limit: 20
      },
      total: 0,
      modal: {
        visible: false,
        title: '',
        form: {}
      },
      tableData: [],
      surveyCategoryList: [],
      surveyList: [],
      topicList: [],
      topicListSearch: [],
      surveyCategoryLabelList: [],
      form: this.$form.createForm(this),
    }
  },
  // mounted () {
  //   this.getTable()
  // },
  created() {
    this.getTable()
    // 加载代理商列表，2024年11月10日12:13:55
    this.listAllPaiSurveyCategory()
    this.listAllPaiSurvey()
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))
    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      if (this.model) {
        this.form.setFieldsValue(pick(this.model, fields))
      }
    })
  },
  methods: {
    listAllPaiSurveyCategory () {
      listAllPaiSurveyCategory().then(res => {
        this.surveyCategoryList = res.data
      }).catch(() => {})
    },
    listAllPaiSurvey () {
      listAllPaiSurvey().then(res => {
        this.surveyList = res.data
      }).catch(() => {})
    },
    listAllPaiSurveyTopic (surveyId) {
      listAllPaiSurveyTopic({surveyId: surveyId}).then(res => {
        this.topicList = res.data
      }).catch(() => {})
    },
    listAllPaiSurveyCategoryLabel (categoryId) {
      listAllPaiSurveyCategoryLabel({categoryId: categoryId}).then(res => {
        this.surveyCategoryLabelList = res.data
      }).catch(() => {})
    },
    handleSurveyChange(val){
      this.listAllPaiSurveyTopic(val)
    },
    handleSurveyChangeSearch(val){
      this.listAllPaiSurveyTopicSearch(val)
    },
    listAllPaiSurveyTopicSearch (surveyId) {
      listAllPaiSurveyTopic({surveyId: surveyId}).then(res => {
        this.topicListSearch = res.data
      }).catch(() => {})
    },
    handleTopicChange(val){
      let categoryId = ''
      this.topicList.forEach( (v) => {
        if(v.id === val){
            categoryId = v.categoryId
        }
      })
      this.listAllPaiSurveyCategoryLabel(categoryId)
    },
    query () {
      this.queryParam.page = 1
      this.getTable()
    },
    reset () {
      this.queryParam = {
        page: 1,
        limit: 20
      }
      this.getTable()
    },
    handleSizeChange (val) {
      this.queryParam.limit = val
      this.getTable()
    },
    handleCurrentChange (val) {
      this.queryParam.page = val
      this.getTable()
    },
    getTable () {
      listByPagePaiSurveyTopicOptions(this.queryParam).then(res => {
        this.tableData = res.data.records
        this.total = parseInt(res.data.total)
      }).catch(() => {})
    },
    handleOk () {
      this.form.validateFields((errors, values) => {
        if (!errors) {
          if (values.id) {
            // 修改
            updatePaiSurveyTopicOptions(values).then(res => {
              this.modal.form = {}
              this.modal.visible = false
              this.queryParam.page = 1
              this.getTable()
              this.$message.success('修改成功')
            }).catch(() => {})
          }else {
            // 新增，2024年12月16日14:33:18
            values.state = 1
            addPaiSurveyTopicOptions(values).then(res => {
              this.modal.form = {}
              this.modal.visible = false
              this.queryParam.page = 1
              this.getTable()
              this.$message.success('新增成功')
            }).catch(() => {})
          }
        }
      })
    },
    handleAdd () {
      // 'id', 'surveyId', 'categoryId', 'topicId', 'categoryLabelId', 'optionsContent', 'optionsScore', 'optionsType', 'sortOrder'
      this.modal.form = {
        surveyId: '',
        categoryId: '',
        topicId: '',
        categoryLabelId: '',
        optionsContent: '',
        
        optionsScore: 1,
        optionsType: 1, // 选项类型：1-文本|2-图片
        sortOrder: 1,
        id: ''
      }
      this.modal.visible = true
      this.modal.title = '新增'
      this.form.setFieldsValue(pick(this.modal.form, fields))
    },
    handleEdit (record) {
      const data = JSON.parse(JSON.stringify(record))
      // 'id', 'surveyId', 'categoryId', 'topicId', 'categoryLabelId', 'optionsContent', 'optionsScore', 'optionsType', 'sortOrder'
      this.modal.form = {
        surveyId: data.surveyId,
        categoryId: data.categoryId,
        topicId: data.topicId,
        categoryLabelId: data.categoryLabelId,
        optionsContent: data.optionsContent,
        
        optionsScore: data.optionsScore,
        optionsType: data.optionsType,
        sortOrder: data.sortOrder,
        id: data.id
      }
      this.modal.visible = true
      this.modal.title = '编辑'
      this.form.setFieldsValue(pick(this.modal.form, fields))
    },    
  }
}
</script>

<style lang="less" scoped>
.view-video {
  position: relative;

  .close {
    position: absolute;
    right: 15px;
    top: 0;
    cursor: pointer;
  }
}

/deep/.ant-modal-body {
  max-height: calc(80vh - 150px);
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  &::-webkit-scrollbar-thumb {
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #e3e3e6;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
  }
}
</style>
